<template>
    <ContentBase>
        <div class="content">
            <div class="content-top">
                <div class="content-top-title">{{ current_record.title }}</div>
            </div>
            <div class="content-bottom">
                <div v-html="current_record.htmlContent"></div>
            </div>
        </div>
    </ContentBase>
</template>

<script setup>
import ContentBase from '@/components/ContentBase';
import { useStore } from 'vuex';
import { ref } from 'vue';
import { useRoute } from 'vue-router';

const store = useStore();
const route = useRoute();
const id = route.params.id;
const records = store.state.user.records;
const current_record = ref(null);
for (let record of records) {
    if (record.id == id) {
        current_record.value = record;
        break;
    }
}

</script>

<style scoped>

.content {
    padding: 20px;
}

.content-top {
    margin-bottom: 20px;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 15px;
}
.content-top-title {
    text-align: center;
    font-size: 24px;
}

.content-bottom {
    
}

</style>